<template>
  <div>
        <!-- {{ hos.list.name }}
        {{val}} -->
    <div class="weizhi">各个疫情定点医院位置</div>
    <div id="container" style="height: 700px"></div>
    <div class="input-card">
        <h4>地图自适应</h4>
        <input id="setFitView" type="button" class="btn" value="地图自适应显示" />
    </div>
    <div class="info">
        <div id="centerCoord"></div>
        <div id="tips"></div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
//at.alicdn.com/t/font_2307408_415759icbhx.css
// <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
import { mapActions, mapState } from "vuex";

export default {
  data() {
    return {
      val: [],
      res:[]
    };
  },
  created() {
    this.findHos({page:1,pageSize:10});
    // console.log(this.$route.query.long,this.$route.query.latit);
    // this.findlatilong();
  },
  mounted() {
    // this.initMap();

    setTimeout(() => {
    this.find_lat_lng();
    }, 2000);
    setTimeout(() => {
      this.initMap();
    }, 5000);

  },
  computed: {
    ...mapState("hos", ["hos"]),
  },
  methods: {
    ...mapActions("hos", ["findHos"]),

    find_lat_lng() {
        // console.log(this.hos.list);
      this.hos.list.map((item) => {
        this.val.push([item.longitude,item.latitude])
        // console.log(this.val.length)
        // this.val=[item.longitude,item.latitude]

      });
      console.log(this.val,'abc')
    },
    initMap() {
      var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [108.33,22.84],
        zoom: 13,
      });

      map.clearMap(); // 清除地图覆盖物
       var markers = [{
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        position: this.val[0]
    }, 
    {
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        position: this.val[1]
    }, {
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        position: this.val[2]
    },
    {
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        position: this.val[3]
    },{
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        position: this.val[4]
    },{
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        position: this.val[5]
    },{
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        position: this.val[6]
    },{
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        position: this.val[7]
    },{
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        position: this.val[8]
    },{
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        position: this.val[9]
    },{
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        position: this.val[10]
    }
    ];
      // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
      // markers.forEach(function (marker) {
      //   console.log(marker.position,'---')
      //   new AMap.Marker({
      //     map: map,
      //     icon: marker.icon,
      //     // position: [marker.position[0], marker.position[1]],
      //     position: [118.305467, 39.807761],
      //     offset: new AMap.Pixel(-1, -3),
      //   });
      // });
      console.log(this.val)
      // console.log(markers[0].position,'+++')
      var item = {}
      for (item of markers){
        console.log(item,'---')
        new AMap.Marker({
          map: map,
          icon: item.icon,
          position: item.position,
          // position: [118.305467, 39.807761],
          offset: new AMap.Pixel(-1, -3),
        });
      };

      var center = map.getCenter();

    //   var centerText =
    //     "当前中心点坐标：" + center.getLng() + "," + center.getLat();
    //   document.getElementById("centerCoord").innerHTML = centerText;
    //   document.getElementById("tips").innerHTML =
    //     "成功添加三个点标记，其中有两个在当前地图视野外！";

      // 添加事件监听, 使地图自适应显示到合适的范围
      AMap.event.addDomListener(
        document.getElementById("setFitView"),
        "click",
        function () {
          var newCenter = map.setFitView();
          document.getElementById("centerCoord").innerHTML =
            "当前中心点坐标：" + newCenter.getCenter();
          document.getElementById("tips").innerHTML =
            "通过setFitView，地图自适应显示到合适的范围内,点标记已全部显示在视野中！";
        }
      );
    },
  },
};
</script>
<style scoped>
.weizhi{
  /* float: left; */
  /* position: absolute; */
  margin: 10px;
  font-size: 30px;
  font-family: 华文行楷;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: rgb(78, 30, 30);
}
</style>